<template>
  <div class="d2-layout-header-aside-group">
    <!-- 半透明遮罩 -->
    <div class="d2-layout-header-aside-mask"></div>
    <!-- 主体内容 -->
    <div class="d2-layout-header-aside-content" flex="dir:top">
      <!-- 顶栏 -->
      <div class="d2-theme-header" flex-box="0" flex>
        <!-- <d2-menu-header flex-box="1"/> -->
        <!-- 顶栏右侧 -->
        <!-- <d2-menu-header flex-box="1"/> -->
        <div class="no-select" flex-box="1"></div>
        <div class="d2-header-right" flex-box="0">
          <d2-header-fullscreen />
          <d2-header-locales />
        </div>
      </div>
      <!-- 下面 主体 -->
      <div class="d2-theme-container" flex-box="1" flex>
        <!-- 主体 侧边栏 -->
        <div class="d2-main">
          <div class="page-login--form">
            <el-card shadow="never" class="card-box" v-loading="loading">
              <h2 style="text-aligin:center;">{{$t('page-register.form.tips28')}}</h2>
              <el-form ref="main-form" :model="mainQuery" :rules="rules" size="mini">
                <el-form-item  :label="$t('page-register.form.registermail')" prop="url">
                  <el-input placeholder="" v-model="mainQuery.mchEmail" @keyup.enter.native="submit" clearable></el-input>
                </el-form-item>

                <el-form-item  :label="$t('page-register.form.Administratormailbox')" prop="url">
                  <el-input placeholder="" v-model="mainQuery.email" @keyup.enter.native="submit" clearable></el-input>
                </el-form-item>

              </el-form>

              <el-button type="primary" class="footer-bottom" @click="submit" size="mini" :loading="loading">{{ $t("page-trade-refund.dialog-add.submit") }}</el-button>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import d2HeaderFullscreen from "../../../layout/header-aside/components/header-fullscreen";
import d2HeaderLocales from "../../../layout/header-aside/components/header-locales";
import mixinSearch from "../../../layout/header-aside/mixins/search";
import r from 'highlight.js/lib/languages/r';
import ApiMain from '@/api/register';
export default {
  name: "d2-layout-header-aside",
  mixins: [mixinSearch],
  components: {
    d2HeaderFullscreen,
    d2HeaderLocales,
  },
  data() {
    return {
      mainQuery: {
        mchEmail: "",
        email: "",
      },
      loading: false,
      rules: {
        mchEmail: [{ required: true, message: `${this.$t('page-register.form.plaseInput')} ${this.$t('page-register.form.registermail')}`, trigger: "blur" }],
        mchEmail: [{ required: true, message: `${this.$t('page-register.form.plaseInput')} ${this.$t('page-register.form.Administratormailbox')}`, trigger: "blur" }],
      },
      regStatus: 0,
      // [侧边栏宽度] 正常状态
      asideWidth: "200px",
      // [侧边栏宽度] 折叠状态
      asideWidthCollapse: "65px",
    };
  },
  computed: {


    /**
     * @description 最外层容器的背景图片样式
     */

  },
  mounted() {
  },
  methods: {
    async submit() {
      if (!this.verifyForm()) return false;
      this.loading = true
      try {
        await ApiMain.retrievePassword(this.mainQuery);
        this.loading = false
        this.$message({ type: 'success', message: this.$t('page-register.form.plaseInput') })
        this.mainQuery = {
          mchEmail: "",
          email: "",
        }
        setTimeout(() => {
          this.$router.go(-1)
        }, 500)

      } catch (error) {
        this.loading = false
      }

    },

    verifyForm() {
      var bool = true;
      this.$refs["main-form"].validate((valid) => (bool = valid));
      return bool;
    },

    /**
     * 接收点击切换侧边栏的按钮
     */
    handleToggleAside() {
      this.asideCollapseToggle();
    },
  },
};
</script>

<style lang="scss" scoped>
.d2-main {
  margin: 0px auto;
  display: flex;
  align-items: center;
  margin-top: 15%;
  flex-direction: column;
  .d2-main-title {
    color: rgba(255, 149, 149, 100);
    font-size: 40px;
  }
  .d2-main-text {
    color: rgba(123, 123, 123, 100);
    font-size: 26px;
  }
  .d2-main-image {
    height: 350px;
    width: 350px;
    border-radius: 50%;
  }
}
.footer-btn {
  display: flex;
  justify-items: center;
  justify-content: center;
  margin-bottom: 100px;
  margin-top: 50px;
}
.footer-bottom {
  display: block;
  margin: 0px auto;
}
// 登录表单
.page-login--form {
  width: 380px;
  // 卡片
  .el-card {
    border: none;
    margin-bottom: 15px;
  }
  // 登录按钮
  .button-login {
    width: 100%;
  }
  .button-register {
    margin-top: 20px;
    margin-left: 0px;
  }
  // 输入框左边的图表区域缩窄
  .el-input-group__prepend {
    padding: 0px 14px;
  }
  .login-code {
    height: 40px - 2px;
    display: block;
    margin: 0px -20px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }
  // 登陆选项
  .page-login--options {
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    color: $color-primary;
    margin-bottom: 15px;
    font-weight: bold;
  }
  .page-login--quick {
    width: 100%;
  }
}
</style>
<style lang="scss">
// 注册主题
@import "~@/assets/style/theme/register.scss";
</style>
